<!DOCTYPE html>
<html>
  <head>
    <title>Vue源码剖析</title>
    <script src="../../dist/vue.js"></script>
  </head>

  <body>
    <div id="demo">
      <h1>异步更新</h1>
      <p id="p1">{{foo}}</p>
    </div>
    <script>
      // 创建实例
      const app = new Vue({
        el: "#demo",
        data: { foo: "ready~~" },
        mounted() {
          this.$nextTick(() => {
            console.log("p1.innerHTML:" + p1.innerHTML);
          });
          // 每一次的赋值都是 导致  watcher入队,赋值3次但是 watcher只入队了一次
          this.foo = Math.random();
          console.log("1:" + this.foo);
          this.foo = Math.random();
          console.log("2:" + this.foo);
          this.foo = Math.random();
          console.log("3:" + this.foo);
          // 异步行为，此时内容没变
          console.log("p1.innerHTML:" + p1.innerHTML); // ready~~
          new Promise().reverse().then(() => {
            console.log("p1.innerHTML:" + p1.innerHTML);
          });
          // $nextTick 会把回调函数 放热 callbacks队尾
          this.$nextTick(() => {
            // 这里才是最新的值  3
            console.log("p1.innerHTML:" + p1.innerHTML);
          });
        },
      });
    </script>
  </body>
</html>
